<template>
  <div class="container">
    <!-- <div class="topSearch card-search">
      <el-form
        :inline="true"
        :model="formInline"
        key="1"
        class="demo-form-inline"
      >
        <el-form-item label="规格型号">
          <el-select size="small" v-model="formInline.types" clearable>
            <el-option
              v-for="item in optionssearch"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直径规格">
          <el-select size="small" v-model="formInline.typesDiameter" clearable>
            <el-option
              v-for="item in optionDiameters"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMachineData">查询</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          v-for="item in tableList"
          :key="item.id"
          :label="item.name"
          :prop="item.prop"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
        />
        <el-table-column label="直径Φ(mm)" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.specifications.diameter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="长度(mm)" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.specifications.length }}</span>
          </template>
        </el-table-column>
        <el-table-column label="正品数" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.reInspect.goodNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="废品数" align="center">
          <template slot-scope="{ row }">
            <span>{{
              row.reInspect.badNumber + row.firstInspect.badNumber
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{ row }">
            <div>
              <el-tag size="medium" v-if="row.reInspect.isOk" type="success"
                >已复检</el-tag
              >
              <el-tag size="medium" v-else type="warning">待复检</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-if="tableData.length !== 0"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px"
      >
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalCount"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getPressMoldOrders } from '@/api/process'
export default {
  data () {
    return {
      pageSize: 10, // 分页的页面大小
      totalCount: 0, // 分页的数据总数
      currentPage: 1, // 分页的当前页
      tableData: [],
      tableList: [
        {
          id: 1,
          name: '编号',
          prop: 'code',
          fixed: 'left'
        },
        {
          id: 4,
          name: '班次',
          prop: 'shift'
        },
        {
          id: 5,
          name: '负责人',
          prop: 'principal'
        },
        {
          id: 8,
          name: '出锅数',
          prop: 'outPotNumber'
        },
        {
          id: 10,
          name: '坩埚数量',
          prop: 'crucibleNumber'
        }
      ]
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    async getTableData () {
      const paylaod = {
        currPage: this.currentPage,
        pageSize: this.pageSize
      }
      const res = await getPressMoldOrders(paylaod)
      // console.log(res)
      if (res.data.code === 200) {
        this.tableData = res.data.data.pageData
        this.totalCount = res.data.data.total
      }
    },
    handleSizeChange (value) {
      this.pageSize = value
      this.getTableData()
    },
    handleCurrentChange (value) {
      this.currentPage = value
      this.getTableData()
    }
  }
}
</script>

<style  scoped>
.container {
  .topSearch {
    background-color: #fff;
    padding: 15px 20px -5px 30px;
    box-sizing: border-box;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    .btnAdd {
      padding: 5px 3px 10px 1px;
    }
  }
  .btnText {
    color: $primary;
  }
  .el-switch {
    margin: -1px 0 0 10px;
     .el-switch__label {
      color: #84868a;
    }
     .el-switch__label.is-active {
      color: #4d70ff;
    }
  }
  .dail {
     .el-dialog__body {
      padding-top: 10px !important;
    }
     .el-divider--horizontal {
      margin: 0 0 28px 0;
    }
    .groupsInput {
       .el-form-item__content {
        display: flex;
        .inp {
          .el-input__inner {
            width: 40%;
            margin-left: 20px;
          }
        }
      }
    }
    .btnflex {
      display: flex;
      justify-content: flex-end;
       .el-form-item__content {
        margin-right: 10px;
        .el-button {
          margin-left: 40px;
        }
      }
    }
    .dateClass {
      display: flex;
      .line {
        margin-left: -40px;
        font-weight: bold;
        width: 30px;
      }
    }
  }
}
</style>
